<template>
  <div class="header">
      <div class="header-left">
        <span class="iconfont icon-zuojiantou"></span>
      </div>
      <div class="header-input">
        <span class="iconfont icon-sousuo"></span>
        <input type="text" placeholder="输入城市景点/游玩主题"/>
      </div>
      <div class="header-right">
        城市
        <span class="iconfont icon-xiajiantou"></span>
      </div>
  </div>
</template>

<script>

    export default {
        name: "Header",

    }
</script>

<style lang="stylus" scoped>
  .header
    width 100%
    height .45rem
    background #00bcd4
    display flex
    align-items center
    color #fff
    font-size .14rem
    .header-left
      margin 0 .06rem
    .header-input
      flex 1
      height .3rem
      background #fff
      border-radius .03rem
      color #cacaca
      line-height .3rem
      span
        display inline-block
        margin-left .5px
        font-size .18rem
        padding-left .05rem
        vertical-align middle
      input
        padding-left 5px
    .header-right
      margin 0 .06rem
</style>
